<template lang="html">
  <div class="m_position">
  	<div	class="header">
  		<headerSearch/>
  	</div>
  	<div v-if="!isShowloading" ref="wrapper">
  		<div class="banner">
      	<Banner  />
	    </div>
	    <div class="nav" >
	    	<ul>
				<li @click="gotoDetail(i)"  v-for="(item,i) in navs" :key="i">
		    		<img :src="'http://img0.wangjiu.com/' +item.ad_source_imgpath"/>
		    		<span>{{item.ad_source_title}}</span>
	    		</li>
	    	</ul>
	    </div>
	    <div class="coat-contain">
	    	<div class="coatDetail" > 
	    		<ul class="coatSmall" >
		    			<li  v-for="(value,index) in floneList" :key="index" >
			    				<img @click="tjDetail(index)" :src="'http://img0.wangjiu.com/'+value.ad_source_imgpath" />
		    			</li>
	    		</ul>
	    	</div>
	    </div>
	    <div class="medocShow">
	    	<router-link to="/famous" class="medocimg">
	    		<img src="http://img0.wangjiu.com/ad/20170706/default/1499321183693521"/>
	    	</router-link>
	    	<div class="medocMenu">
	    		<a href="#"  v-for="(item,i) in medocList" :key="i">
		    		<img @click="preDetail(i)" :src="'http://img0.wangjiu.com/'+item.ad_source_imgpath" />
	    		</a>
	    	</div>
	    </div>
	    
	    <Newfloor :is-show-loading="isShowloading" />
	    <prodetail :is-show-loading="isShowloading"></prodetail>
	    <div class="no-more" >
	    	没有更多了...
	    </div>
  	</div>
  	
    <div class="yo-loading yo-loading-a" v-if="isShowloading">
      <i class="yo-ico"></i>
      <div class="text">加载中...</div>
    </div>
  </div>
</template>

<script>
	import Vue from "vue"
	import VueRouter from 'vue-router'
	import Banner from './banner.vue'
	import Newfloor from './newfloor.vue'
	import Prodetail from './prodetail.vue'
	import VueResource from "vue-resource"
	import headerSearch from './head-search.vue'
	Vue.use(VueResource)
	export default {
		data() {
	    return{
	    	navs:[],
				floneList:[],
				medocList:[],
				isShowloading:true
	    }
	  },
	  methods: {
			gotoDetail(index){
				switch(index){
					case 0:
					 this.$router.push({name:'hzone'});break;
					 case 1:
					 this.$router.push({name:'kill'});break;
				}
			},
			tjDetail(index){
				switch(index){
					case 0:this.$router.push({name:'kill'});break;
					case 1:this.$router.push({name:'manor'});break;
					case 2:this.$router.push({name:'manor'});break;
					case 3:this.$router.push({name:'manor'});break;
					case 4:this.$router.push({name:'bubble'});break;
				}
			},
			preDetail(index){
					switch(index){
						case 0:this.$router.push({name:'boxsgift'});break;
						case 1:this.$router.push({name:'party'});break;
						case 2:this.$router.push({name:'party'});break;
					}
			}
			
	  },
	  components: {
	  	Banner,
	  	headerSearch,
	  	Newfloor,
	  	Prodetail
	  },
	  mounted(){
     
      this.isShowloading = false
     
      this.$http.jsonp('/api/board/query/space.jsonp?client_sig=wap&format=jsonp&space_id=396&_=1508977182591')
      .then((res)=>{
				const data = res.body.result
      	this.navs = data
      })
      this.$http.jsonp('/api/board/query/space.jsonp?client_sig=wap&format=jsonp&space_id=397&_=1508977182595')
      .then((res)=>{
				const data = res.body.result
      	this.floneList = data
      	this.isShowloading = false
      	
      })
      this.$http.jsonp('/api/board/query/space.jsonp?client_sig=wap&format=jsonp&space_id=398&_=1508977182593')
      .then((res)=>{
				const data = res.body.result
				this.medocList = data
				this.medocList=this.medocList.slice(-3);
      	this.isShowloading = false
      	
      })
      
      
      
      
	  }
	}
</script>
